<template>
	<view class="content">
		<view class="content-bg">
			<view class="header" @click="gocar">
				<image :src="proxy.serverimageUrl + 'Ordersettlement/back.png'" mode=""></image>
				<view class="text">
					订单结算
				</view>
			</view>
			<scroll-view :scroll-y="true" class="ScrollView">
				<view class="addrBox" @click="goaddr">
					<image class="leftimg" :src="proxy.serverimageUrl + 'Ordersettlement/addricon.png'" mode=""></image>
					<view class="address">
						<p class="title">{{addrlist.userAddr}}</p>
						<p class="phonenumber">
							{{addrlist.detailedAddress}}
						</p>
						<p class="phonenumber">
							<span>{{addrlist.userName}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{addrlist.userPhone}}</span>
						</p>
					</view>
					<image class="rightimg" :src="proxy.serverimageUrl + 'Ordersettlement/back-right.png'" mode="">
					</image>
				</view>
				<view class="orderdetail">
					<view class="orderdata" v-for="(item,index) in commoditydata" :key="index">
						<image :src="item.commonFileDtoList[0].url" mode=""></image>
						<view class="textBox">
							<p class="title">{{item.schoolName}}—{{item.cname}}</p>
							<p class="nameBox">{{item.sname}},{{item.specificationsSize}}</p>
							<view class="bottomBox">
								<view class="left-price">
									￥{{item.commodityPrice}}
								</view>
								<view class="right-num">
									x{{item.number}}
								</view>
							</view>
						</view>
					</view>
					<view class="commodity-information">
						<view class="">
							商品运费
						</view>
						<view class="price">
							￥{{expressAmountprice ? expressAmountprice : 0}}
						</view>
					</view>
					<view class="commodity-information">
						<view class="">
							商品总额
						</view>
						<view class="price">
							￥{{commodityprice}}
						</view>
					</view>
					<view class="commodity-information">
						<view class="">
							支付方式
						</view>
						<view class="">
							在线支付
						</view>
					</view>
				</view>
				<view class="kongBox" style="height: 30rpx; width: 100%;">
				</view>
			</scroll-view>
		</view>
		<view class="bottom-box">
			<view class="box">
				<view class="box-left">
					<span class="span1">应付：</span>
					<span class="span2">￥{{commodityprice + expressAmountprice}}</span>
				</view>
				<up-button color="#013CAA" :disabled="disabd" @click="payment" text="立即支付"></up-button>
			</view>
		</view>
		<up-modal :show="modalshow" @confirm="modelconfirm" :content='modalcontent'></up-modal>
		<up-loading-page loading-text="loading..." bg-color="#e8e8e8" :loading="loadingpage"></up-loading-page>
		
	</view>
</template>

<script setup>
	import {
		addrList,
		queryBalanceByScid,
		savaOrderInfo,
		orderbuy,
		orderbuyBalance
	} from '@/utils/api.js'
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue';
	import {
		throttle
	} from '@/utils/throttle.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const loadingpage = ref(false)
	const ids = ref([])
	const orderbuydata = ref({})
	const sid = ref('')
	const disabd = ref(false)
	/*商品运费*/
	const expressAmountprice = ref(0)
	/*弹框显示*/
	const modalshow = ref(false)
	const modalcontent = ref('')
	sid.value = uni.getStorageSync('sid')
	onLoad((o) => {
		if (o.ids) {
			ids.value = JSON.parse(o.ids)
			getcommodity(ids.value)
		} else if (o.orderbuy) {
			orderbuydata.value = JSON.parse(o.orderbuy)
			getorderbuydata(orderbuydata.value)
		} else if (uni.getStorageSync('ids')) {
			ids.value = JSON.parse(uni.getStorageSync('ids'))
			getcommodity(ids.value)
		} else {
			orderbuydata.value = JSON.parse(uni.getStorageSync('orderbuy'))
			getorderbuydata(orderbuydata.value)
		}
	})
	onShow(() => {
		getaddrlist()

	})
	/*选择地址*/
	const goaddr = () => {
		uni.navigateTo({
			url: '/subpages/AddressManagement/index'
		})
	}
	/*返回判断是购物车还是商品详情*/
	const gocar = () => {
		if (ids.value.length > 0) {
			uni.switchTab({
				url: '/pages/Car/index'
			})
		} else {
			uni.redirectTo({
				url: '/subpages/ProductDetails/index?cid=' + orderbuydata.value.cid
			})
		}

	}
	const modelconfirm = () =>{
			modalshow.value = false
			uni.switchTab({
				url: '/pages/Car/index'
			})
	}
	//计算总价
	const commodityprice = computed(() => {
		// 3.1 获取书籍的价格和数量
		// 将bookList转化为整数的数组
		const result = commoditydata.value
			.map((book) => {
				const {
					commodityPrice,
					number
				} = book;
				return commodityPrice * number;
			})
			// 3.2使用reduce求和
			.reduce((a, b) => a + b, 0);
		// 3.3 保留两位小数
		return result
	});
	// 生成订单需要参数
	const addOrderDetailRequests = ref([])
	/*查询商品信息*/
	const commoditydata = ref([])
	/*立即购买单个商品*/
	const getorderbuydata = (value) => {
		orderbuy(value).then(res => {
			commoditydata.value = res.data
			expressAmountprice.value = res.data[0].expressAmount
			addOrderDetailRequests.value.push(...res.data)
		})
	}
	const getcommodity = (ids) => {
		let params = {
			list: ids
		}
		queryBalanceByScid(params).then(res => {
			if (res.code == 200) {
				commoditydata.value = res.rows
				expressAmountprice.value = res.rows[0].expressAmount
				res.rows.map(item => {
					addOrderDetailRequests.value.push({
						cid: item.cid,
						number: item.number,
						scid: item.scid,
						specificationsSize: item.specificationsSize,
						stid: item.stid
					})
				})
			}
		})
	}
	/*点击立即支付创建订单*/
	const payment = throttle(() => {
		disabd.value = true
		loadingpage.value = true
		let params = {
			openid: uni.getStorageSync('openid'),
			sid: sid.value,
			deliveryStatus: 0,
			userAddr: addrlist.value.userAddr,
			userName: addrlist.value.userName,
			userPhone: addrlist.value.userPhone,
			addOrderDetailRequests: addOrderDetailRequests.value,
			address: addrlist.value.detailedAddress
		}
		if (!addrlist.value.userAddr) {
			uni.showToast({
				title: '请选择地址',
				duration: 1000,
				icon: 'error'
			})
			loadingpage.value = false
			return
		} else {
			// return
			if (ids.value.length > 0) {
				savaOrderInfo(params).then(res => {
					if (res.code == 200) {
						loadingpage.value = false
						console.log(res.data);
						uni.setStorageSync('ids', '')
						uni.openEmbeddedMiniProgram({
							appId: 'wxe2ae77d4cbb8abf0',
							path: `/pages/qrPay/qrPay?t=${res.data.token}`, // token 从接口获取
							envVersion: 'release', // 打开环境 
							success(res) {
								console.log(res, 'res........');
							},
							fail(error) {
								console.log(error, 'error........');
							},
							complete(complete) {
								console.log(complete, 'complete........');
							}
						})
						disabd.value = false
					}else {
						uni.hideToast();
						modalcontent.value = res.msg
						modalshow.value = true
						disabd.value = false
					}
				})
			} else {
				orderbuyBalance(params).then(res => {
					if (res.code == 200) {
						loadingpage.value = false
						uni.setStorageSync('orderbuy', '')
						uni.openEmbeddedMiniProgram({
							appId: 'wxe2ae77d4cbb8abf0',
							path: `/pages/qrPay/qrPay?t=${res.data.token}`, // token 从接口获取
							envVersion: 'release', // 打开环境
							success(res) {
								console.log(res, 'res........');
							},
							fail(error) {
								console.log(error, 'error........');
							},
							complete(complete) {
								console.log(complete, 'complete........');
							}
						})
						disabd.value = false
					} else {
						uni.hideToast();
						modalcontent.value = res.msg
						modalshow.value = true
						disabd.value = false
					}
				})
			}
		}
	}, 800)
	/*地址接口数据*/
	const addrlist = ref({})
	const getaddrlist = () => {
		let params = {
			openId: uni.getStorageSync('openid')
		}
		addrList(params).then(res => {
			if (res.code == 200) {
				res.data.map(item => {
					if (item.userState == 1) {
						addrlist.value = item
					}
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F2F2F2;
		position: relative;
		min-height: 100vh;

		.content-bg {
			width: 100vw;
			height: 781rpx;
			background: linear-gradient(180deg, #689CFD, #F2F2F2);
			position: absolute;
			top: 0;
			// z-index: -1;
			padding: 117rpx 30rpx;

			.header {
				display: flex;
				align-items: center;

				image {
					width: 16rpx;
					height: 30rpx;
				}

				.text {
					margin-left: 21rpx;
					font-family: Source Han Sans SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
				}

			}

			.ScrollView {
				height: calc(100vh - 300rpx);
				margin-top: 60rpx;

				.addrBox {

					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					background-color: #ffffff;
					border-radius: 20rpx;
					padding: 42rpx;

					.leftimg {
						width: 74rpx;
						height: 74rpx;
					}

					.address {
						.title {
							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 34rpx;
							color: #303030;
						}

						.phonenumber {
							margin-top: 20rpx;
							font-family: Source Han Sans SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #636363;
						}

					}

					.rightimg {
						width: 13rpx;
						height: 24rpx;
					}
				}

				.orderdetail {

					margin-top: 30rpx;
					width: 100%;
					padding: 30rpx;
					border-radius: 20rpx;
					background-color: #ffffff;

					.orderdata {
						margin-bottom: 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						image {
							width: 180rpx;
							height: 180rpx;
						}

						.textBox {
							width: 420rpx;

							.title {
								font-family: Source Han Sans SC;
								font-weight: 500;
								font-size: 30rpx;
								color: #303030;
							}

							.nameBox {
								margin-top: 20rpx;
								font-family: Source Han Sans SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #636363;
							}

							.bottomBox {
								margin-top: 60rpx;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.left-price {
									font-family: Source Han Sans SC;
									font-weight: 500;
									font-size: 32rpx;
									color: #013CAA;
								}

								.right-num {
									font-family: Source Han Sans SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #636363;
								}
							}
						}

					}

					.line {
						width: 100%;
						height: 1rpx;
						background: #EEEEEE;
					}

					.commodity-information {
						display: flex;
						margin-top: 41rpx;
						align-items: center;
						justify-content: space-between;
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #303030;

						.price {
							font-family: Source Han Sans SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #303030;
						}
					}
				}
			}

		}

		.bottom-box {
			position: fixed;
			bottom: 0;
			height: 109rpx;
			background: #FFFFFF;
			width: 100%;

			.box {
				display: flex;
				height: 100%;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;

				.box-left {
					.span1 {
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #303030;
					}

					.span2 {
						font-family: Source Han Sans SC;
						font-weight: bold;
						font-size: 40rpx;
						color: #013CAA;
					}
				}

				::v-deep .u-button {
					width: 240rpx !important;
					height: 80rpx !important;
					margin: 0 !important;
				}
			}

		}
	}
</style>